/**
 *@description 公共的柱状图
 *@author yhw
 */
import React, {
    Component,
    PropTypes
} from 'react';
import ReactEcharts from 'echarts-for-react';

// usage: {bars("性别","100%", 300, this.props.PersonsInfo.ageData, this.props.PersonsInfo.ageLoading)}
export default function bars(seriesName, width, height, data, loading) {

    let option = {
        toolbox: {
            show: true,
            right: 20,
            feature: {
                //restore: {},
                saveAsImage: {
                    icon: 'image://../sources/download.png?t=004',
                    iconStyle: {
                        emphasis: {
                            borderColor: "#fff"
                        }
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color: '#fff',
        textStyle: {
            color: '#fff'
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: data && data.category || [],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#bdbdbd'
                }
            },
        }],
        yAxis: [{
            type: 'value',
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#bdbdbd'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#bdbdbd'
                }
            },
        }],
        series: [{
            name: seriesName || "",
            type: 'bar',
            //barWidth: '60%',
            data: data && data.value || []
        }]
    };

    return (
        <div>
          <ReactEcharts
                option={option} 
                style={{width:width, height: height}}
                theme={"theme_name"}
                showLoading={loading} />
        </div>
    );
}